<template>
  <div class="map">
    <!--<img src="../../assets/investment/map.jpg" alt="">-->
    <iframe v-if="investDetail.car && investDetail.car.imei" :src="loadImei" width="100%" height="725" frameborder="0"></iframe>
  </div>
</template>

<script>

  import { mapGetters } from "vuex";

  export default {
    components: {},
    data() {
      return {
        iframeSrc:''
      }
    },
    computed: {
      ...mapGetters([
          "investDetail"
        ]),
      loadImei(){
        this.imei = this.investDetail.car.imei;
        return "http://m.jshrdtz.com/map.html#" + this.imei;
      }
    },
    methods: {

    }
  }
</script>
<style scoped lang="scss">

  .com-middle {
    width: 100%;
    min-width: 1210px;
    background: url(../../assets/product/pro-bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
    .comm-content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      h3 {
        width: 100%;
        height: 65px;
        background: url(../../assets/product/line.png) center no-repeat;
        background-size: 1200px 4px;
        text-align: center;
        color: #ffffff;
        font-size: 32px;
        line-height: 65px;
        margin-top: 110px;
      }
      .commc-nav {
        width: 100%;
        height: 75px;
        background-color: #ffffff;
        margin-top: 70px;
        position: relative;
        .comn-com {
          width: 240px;
          height: 91px;
          position: absolute;
          bottom: 0;
          z-index: 99;
          color: #000000;
          text-align: center;
          line-height: 105px;
          font-size: 28px;
          &.active {
            background: url(../../assets/product/top.png) center no-repeat;
            color: #ffffff;
          }
        }
        .comn-shouyi {
          left: 108px;
        }
        .comn-huidi {
          left: 490px;
        }
        .comn-guquan {
          left: 790px;
        }

      }

      .com-out {
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        overflow: hidden;
        margin-top: 50px;
      }
      .com-detail {
        width: 996px;
        margin: 50px auto 0;

        .com-map {
          width: 100%;
          height: 200px;
          float: left;
          margin-bottom: 20px;
          margin-top: 20px;
          position: relative;
          .mod-left {
            width: 200px;
            height: 200px;
            float: left;
            background: url(../../assets/investment/mod-left.png) center no-repeat;
            background-size: cover;
            .ml-title {
              width: 100%;
              color: #ffffff;
              font-size: 24px;
              text-align: center;
              margin: 30px 0 10px;
            }
            .ml-rate {
              width: 175px;
              color: #ffffff;
              font-size: 42px;
              text-align: center;
              margin: 10px auto;
              padding: 8px 0;
              border-top: 5px solid #ffffff;
              border-bottom: 4px solid #ffffff;
              font-family: "Hannotate SC", Yuanti SC, YouYuan, Wawati SC, NSimSun;
              font-weight: 600;
              position: relative;
              img {
                display: block;
                position: absolute;
                bottom: -19px;
                left: 50%;
                margin-left: -11px;
              }
            }
          }
          .mod-right {
            width: 796px;
            height: 200px;
            float: left;
            position: relative;
            background: url(../../assets/investment/mod-right.png) left center no-repeat;
            .modr-big {
              width: 298px;
              line-height: 200px;
              font-weight: 800;
              font-size: 62px;
              font-family: "Yuanti SC", YouYuan, Wawati SC, NSimSun;
              color: #ffffff;
              float: left;
            }
            .modr-details {
              width: 400px;
              float: left;
              margin: 40px 0 0 30px;
              .modrd-one {
                width: 100%;
                margin-bottom: 12px;
                text-align: left;
                span {
                  font-size: 20px;
                  color: #ffffff;
                  margin-right: 50px;
                  i {
                    color: #ff6430;
                    font-style: inherit;
                  }
                }

              }
              .modrd-two {
                width: 100%;
                text-align: left;
                font-size: 20px;
                color: #ffffff;
                margin-bottom: 12px;
              }
              .modrd-three {
                width: 100%;
                text-align: left;
                font-size: 20px;
                color: #ffffff;
              }
            }
            .see-details {
              width: 150px;
              height: 40px;
              position: absolute;
              bottom: 20px;
              right: 50px;
              background: url(../../assets/product/see-detail.png) center no-repeat;
            }
          }
          .brand {
            width: 167px;
            height: 133px;
            position: absolute;
            top: 20px;
            right: -90px;
          }

        }
        .map {
          width: 100%;
          height: auto;
          margin-bottom: 75px;
          float: left;
        }
      }

    }
  }

</style>
